<template>
  <div class="table-container">
    <form @submit.prevent="generateTable">
      <label for="rows">行数:</label>
      <input type="number" id="rows" v-model.number="rows" min="1" required />

      <label for="cols">列数:</label>
      <input type="number" id="cols" v-model.number="cols" min="1" required />

      <label for="borderWidth">边界宽度:</label>
      <input type="number" id="borderWidth" v-model.number="borderWidth" min="1" required />

      <p>是否显示间隔色：</p>
      <label>
        <input type="radio" v-model="rowHighlight" value="yes" /> 显示
      </label>
      <label>
        <input type="radio" v-model="rowHighlight" value="no" /> 不显示
      </label>

      <p>是否显示列间隔色：</p>
      <label>
        <input type="radio" v-model="colHighlight" value="yes" /> 显示
      </label>
      <label>
        <input type="radio" v-model="colHighlight" value="no" /> 不显示
      </label>

      <h3>合并单元格</h3>
      <label for="startRow">起始行 (a):</label>
      <input type="number" id="startRow" v-model.number="mergeStartRow" min="0" />

      <label for="startCol">起始列 (b):</label>
      <input type="number" id="startCol" v-model.number="mergeStartCol" min="0" />

      <label for="mergeRows">合并行数 (c):</label>
      <input type="number" id="mergeRows" v-model.number="mergeRows" min="0" />

      <label for="mergeCols">合并列数 (d):</label>
      <input type="number" id="mergeCols" v-model.number="mergeCols" min="0" />

      <button type="submit">生成表格</button>
    </form>
    <p></p>
    <table v-if="rows && cols">
      <tr v-for="(row, rowIndex) in rowsArray" :key="rowIndex">
        <td
            v-for="(col, colIndex) in colsArray"
            :key="colIndex"
            :rowspan="getRowspan(rowIndex, colIndex)"
            :colspan="getColspan(rowIndex, colIndex)"
            :style="getCellStyle(rowIndex, colIndex)"
        >
          {{ rowIndex + 1 }},{{ colIndex + 1 }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: 0,
      cols: 0,
      borderWidth: 1,
      rowHighlight: 'no',
      colHighlight: 'no',
      mergeStartRow: 0,
      mergeStartCol: 0,
      mergeRows: 0,
      mergeCols: 0
    };
  },
  computed: {
    rowsArray() {
      return Array.from({ length: this.rows });
    },
    colsArray() {
      return Array.from({ length: this.cols });
    }
  },
  methods: {
    generateTable() {
      this.$forceUpdate();
    },
    getCellStyle(rowIndex, colIndex) {
      const styles = {
        borderWidth: `${this.borderWidth}px`,
        borderColor: 'black',
        borderStyle: 'solid'
      };

      if (this.rowHighlight === 'yes') {
        styles.backgroundColor = (rowIndex % 2 === 0) ? 'gray' : 'white';
      } else {
        styles.backgroundColor = 'white';
      }

      if (this.colHighlight === 'yes') {
        styles.backgroundColor = (colIndex % 2 === 0) ? 'lightgray' : 'white';
      }

      return styles;
    },
    getRowspan(rowIndex, colIndex) {
      if (this.isMerged(rowIndex, colIndex)) {
        if (this.mergeStartRow <= rowIndex + 1 && rowIndex + 1 < this.mergeStartRow + this.mergeRows) {
          return this.mergeRows;
        }
      }
      return 1;
    },
    getColspan(rowIndex, colIndex) {
      if (this.isMerged(rowIndex, colIndex)) {
        if (this.mergeStartCol <= colIndex + 1 && colIndex + 1 < this.mergeStartCol + this.mergeCols) {
          return this.mergeCols;
        }
      }
      return 1;
    },
    isMerged(rowIndex, colIndex) {
      return this.mergeStartRow <= rowIndex + 1 &&
          rowIndex + 1 < this.mergeStartRow + this.mergeRows &&
          this.mergeStartCol <= colIndex + 1 &&
          colIndex + 1 < this.mergeStartCol + this.mergeCols;
    }
  }
};
</script>

<style scoped>
.table-container {
  margin: 20px;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid;
  padding: 8px;
}
</style>